<template>
  <div class="page-login">
    <mu-flex class="header" align-items="center">
      <mu-avatar size="40" class="header-img">
        <img src="./imgs/logo.png" />
      </mu-avatar>
      <span>学习王者</span>
    </mu-flex>
    <div v-if="select !== 'bindWxCode'" class="main">
      <div
        class="left-container"
        :style="{
          background:
            'url(' +
            'https://image.xuexiwangzhe.com/Fgcrbt1Ji6ePWq_n4TnTMuN70s3h' +
            ')',
          backgroundSize: 'cover',
        }"
      >
        <!-- <mu-avatar size="70" style="margin:60px auto 25px auto;display:block;">
        </mu-avatar>
        <div
          style="font-weight:500;color:#fff;letter-spacing:1px;font-size:16px;text-align:center;margin-bottom:10px;"
        >
          丁宇慧
        </div>
        <div style="color:#fff;text-align:center;margin-bottom:20px;">
          宜训科技 - 高级UI设计师
        </div>
        <div
          style="line-height:25px;
letter-spacing:1px;font-size:14px;color:#fff;margin-bottom:40px;"
        >
          置边况做千导家没质圆划今议引界与需但利红业南单论适习
          区电。专完声价精回实求出放计地农美比资好利中复报向代
          关增置天道么结满保育它意号展位斯做应。科与目报状议总
          国识半局出众群他求业路数属片资管深务约较该这联规说千
          设史克克率难西除到际如。
        </div>
        <mu-flex justify-content="end">
          <div>
            <mu-flex
              align-items="center"
              style="color:#fff;font-size:18px;text-align:right;"
            >
              <img
                src="https://image.xuexiwangzhe.com/FoUX8Q8aF0EH-2MK1-yTKcpxOGQj"
                style="width:20px;margin-right:10px;"
              />
              <span>小工具 </span>
            </mu-flex>
            <div style="font-size:12px;text-align:right;color:#fff;">
              Xiaogongju
            </div>
          </div>
        </mu-flex> -->
      </div>
      <div class="right-container">
        <div v-if="select === 'pwdLogin' || select === 'codeLogin'">
          <mu-flex class="login-code">
            <img
              src="https://image.xuexiwangzhe.com/Fu68qnElpCrZj-3NomQkQ-3hHwXh"
              class="login-code-sign"
              @click="select = 'wxLogin'"
            />
            <img
              src="https://image.xuexiwangzhe.com/FiUkHm8Iu_CbrPraX0RVbxXQoLQ2"
              class="login-code-code"
              @click="select = 'wxLogin'"
            />
          </mu-flex>
          <div class="login-main">
            <mu-flex class="login-tab" justify-content="center">
              <span
                :class="[
                  'login-tab-item',
                  select === 'pwdLogin' ? ' login-tab-item-actived' : '',
                ]"
                @click="select = 'pwdLogin'"
                >密码登录</span
              >
              <span
                :class="[
                  'login-tab-item',
                  select === 'codeLogin' ? ' login-tab-item-actived' : '',
                ]"
                @click="select = 'codeLogin'"
                >验证码登录</span
              >
            </mu-flex>
            <div v-if="select === 'codeLogin'">
              <mu-form ref="codeLoginForm" :model="codeForm">
                <mu-form-item
                  class="login-input-aj"
                  prop="phone"
                  :rules="phoneRules"
                >
                  <mu-text-field
                    prop="phone"
                    class="login-input"
                    label="手机号"
                    label-float
                    :error-text="phoneError"
                    v-model="codeForm.phone"
                    style="width:100%;"
                  ></mu-text-field>
                </mu-form-item>
                <mu-form-item
                  class="login-input-aj"
                  style="margin-bottom:55px;"
                  prop="code"
                  :rules="codeRules"
                >
                  <mu-text-field
                    prop="code"
                    class="login-input"
                    label="验证码"
                    label-float
                    v-model="codeForm.code"
                    style="width:100%;"
                  >
                  </mu-text-field>
                  <mu-button
                    v-if="!verifyInterval"
                    class="get-code-btn"
                    @click="getVerifyCode(codeForm.phone)"
                    >获取验证码</mu-button
                  >
                  <mu-button
                    v-else
                    disabled
                    class="get-code-btn get-code-btn-disabled"
                    >获取验证码({{ verifyTime }})</mu-button
                  >
                </mu-form-item>
                <mu-button class="login-btn" @click="login('code')"
                  >登录</mu-button
                >
                <div class="go-register">
                  还没账号？ <span @click="select = 'register'">立即注册</span>
                </div>
              </mu-form>
            </div>
            <div v-if="select === 'pwdLogin'">
              <mu-form ref="pwdLoginForm" :model="pwdForm">
                <mu-form-item
                  class="login-input-aj"
                  prop="account"
                  :rules="accountRules"
                >
                  <mu-text-field
                    prop="account"
                    class="login-input"
                    label="手机号/账号"
                    label-float
                    v-model="pwdForm.account"
                    style="width:100%;"
                  ></mu-text-field>
                </mu-form-item>
                <mu-form-item
                  style="margin-bottom:0;padding-bottom:5px;"
                  prop="pwd"
                  :rules="pwdRules"
                >
                  <mu-text-field
                    prop="pwd"
                    class="login-input"
                    label="密码"
                    label-float
                    v-model="pwdForm.pwd"
                    :type="pwdShow ? 'text' : 'password'"
                    style="width:100%;"
                  >
                  </mu-text-field>
                  <img
                    class="pwd-input-img"
                    src="https://image.xuexiwangzhe.com/FjkWADwiGa-0UcU9o6ypSXMz6BP7"
                    v-if="!pwdShow"
                    @click="pwdShow = true"
                  />
                  <img
                    class="pwd-input-img"
                    src="https://image.xuexiwangzhe.com/FiKZ2LCI89Pbrmfs8NIWq9Re43Qb"
                    v-if="pwdShow"
                    @click="pwdShow = false"
                  />
                </mu-form-item>
                <mu-flex style="margin-bottom:40px;" justify-content="end">
                  <span @click="select = 'forgetPwd'" class="login-forget-pwd"
                    >忘记密码</span
                  >
                </mu-flex>
                <mu-button class="login-btn" @click="login('pwd')"
                  >登录</mu-button
                >
                <div class="go-register">
                  还没账号？ <span @click="select = 'register'">立即注册</span>
                </div>
              </mu-form>
            </div>
          </div>
        </div>
        <div v-if="select === 'wxLogin'">
          <mu-flex class="login-code">
            <img
              src="https://image.xuexiwangzhe.com/Fm7B4Gy2ZkjKZ3fhEt3HEYfl7tNa"
              class="login-code-sign"
              style="margin-top:0;"
              @click="select = 'pwdLogin'"
            />
            <img
              src="https://image.xuexiwangzhe.com/FnO910pJ4rVaoYUINw3KMEVOJ4BG"
              class="login-code-code"
              style="width:36px;"
              @click="select = 'pwdLogin'"
            />
          </mu-flex>
          <div class="login-main">
            <div class="code-title">微信登录</div>
            <mu-circular-progress
              v-if="wxCodeLoading"
              class="demo-circular-progress wxcode-loading"
              :size="36"
            ></mu-circular-progress>
            <img class="qrcode-img" v-else :src="baseImgUrl + qrCode" />
            <div class="qrcode-sign">
              请使用微信扫描二维码登录<br />
              “小工具管理后台”
            </div>
            <div class="go-register" style="color:#838383;">
              没有账号？<span @click="select = 'register'">立即注册</span>
            </div>
          </div>
        </div>
        <div v-if="select === 'forgetPwd'" class="forget-main">
          <div class="forget-title">重置密码</div>
          <mu-form ref="forgetPwdForm" :model="forgetForm">
            <mu-form-item
              class="login-input-aj"
              prop="phone"
              :rules="phoneRules"
            >
              <mu-text-field
                prop="phone"
                class="login-input"
                label="手机号"
                label-float
                v-model="forgetForm.phone"
                style="width:100%;"
              ></mu-text-field>
            </mu-form-item>
            <mu-form-item class="login-input-aj" prop="code" :rules="codeRules">
              <mu-text-field
                prop="code"
                class="login-input"
                label="验证码"
                label-float
                v-model="forgetForm.code"
                style="width:100%;"
              >
              </mu-text-field>
              <mu-button
                v-if="!verifyInterval"
                class="get-code-btn"
                @click="getVerifyCode(forgetForm.phone)"
                >获取验证码</mu-button
              >
              <mu-button
                v-else
                disabled
                class="get-code-btn get-code-btn-disabled"
                >获取验证码({{ verifyTime }})</mu-button
              >
            </mu-form-item>
            <mu-form-item class="forget-input-aj" prop="pwd" :rules="pwdRules">
              <mu-text-field
                prop="pwd"
                class="login-input"
                label="新密码"
                label-float
                v-model="forgetForm.pwd"
                :type="pwdShow ? 'text' : 'password'"
                style="width:100%;"
              ></mu-text-field>
              <img
                class="pwd-input-img"
                style="bottom:25px"
                src="https://image.xuexiwangzhe.com/FjkWADwiGa-0UcU9o6ypSXMz6BP7"
                v-if="!pwdShow"
                @click="pwdShow = true"
              />
              <img
                class="pwd-input-img"
                style="bottom:25px"
                src="https://image.xuexiwangzhe.com/FiKZ2LCI89Pbrmfs8NIWq9Re43Qb"
                v-else
                @click="pwdShow = false"
              />
            </mu-form-item>
            <mu-button class="login-btn" @click="forgetPwd">确定</mu-button>
            <div class="go-register">
              已有账号？ <span @click="select = 'pwdLogin'">马上登录</span>
            </div>
          </mu-form>
        </div>
        <div v-if="select === 'register'" class="register-main">
          <mu-flex class="login-tab" justify-content="center">
            <span class="login-tab-item login-tab-item-actived">免费注册</span>
          </mu-flex>
          <mu-form ref="registerSubmitForm" :model="registerForm">
            <mu-form-item
              class="login-input-aj"
              prop="phone"
              :rules="phoneRules"
            >
              <mu-text-field
                prop="phone"
                class="login-input"
                label="手机号"
                label-float
                :error-text="phoneError"
                v-model="registerForm.phone"
                style="width:100%;"
              ></mu-text-field>
            </mu-form-item>
            <mu-form-item class="login-input-aj" prop="code" :rules="codeRules">
              <mu-text-field
                prop="code"
                class="login-input"
                label="验证码"
                label-float
                v-model="registerForm.code"
                style="width:100%;"
              >
              </mu-text-field>
              <mu-button
                v-if="!verifyInterval"
                class="get-code-btn"
                @click="getVerifyCode(registerForm.phone)"
                >获取验证码</mu-button
              >
              <mu-button
                v-else
                disabled
                class="get-code-btn get-code-btn-disabled"
                >获取验证码({{ verifyTime }})</mu-button
              >
            </mu-form-item>
            <mu-form-item
              style="margin-bottom:10px;padding-bottom:5px;"
              prop="pwd"
              :rules="pwdRules"
            >
              <mu-text-field
                prop="pwd"
                class="login-input"
                label="设置密码"
                label-float
                v-model="registerForm.pwd"
                style="width:100%;"
                :type="pwdShow ? 'text' : 'password'"
              ></mu-text-field>
              <img
                class="pwd-input-img"
                style="bottom:25px"
                src="https://image.xuexiwangzhe.com/FjkWADwiGa-0UcU9o6ypSXMz6BP7"
                v-if="!pwdShow"
                @click="pwdShow = true"
              />
              <img
                class="pwd-input-img"
                style="bottom:25px"
                src="https://image.xuexiwangzhe.com/FiKZ2LCI89Pbrmfs8NIWq9Re43Qb"
                v-if="pwdShow"
                @click="pwdShow = false"
              />
            </mu-form-item>
            <mu-form-item prop="read">
              <mu-checkbox
                prop="read"
                v-model="registerForm.read"
              ></mu-checkbox>
              <div class="read-info">
                我已阅读并接受 <span>用户协议</span> 和 <span>隐私政策</span>
              </div>
            </mu-form-item>
            <mu-button
              class="login-btn"
              :disabled="!registerForm.read"
              @click="register"
              >注册</mu-button
            >
            <div class="go-register">
              已有账号？ <span @click="select = 'pwdLogin'">马上登录</span>
            </div>
          </mu-form>
        </div>
      </div>
      <mu-flex class="footer" align-items="center" justify-content="center">
        <img
          src="https://image.xuexiwangzhe.com/FoXEtMkipOeFWecx6fqHEfKinPGu"
          class="footer-line-img"
          style="margin-right:30px;"
        />
        <span>高效的学习项目运营平台</span>
        <img
          src="https://image.xuexiwangzhe.com/Fm9wgl61bEuf-f94OAyyVXLtialZ"
          class="footer-line-img"
          style="margin-left:30px;"
        />
      </mu-flex>
    </div>
    <div v-if="select === 'bindWxCode'" class="bind-wechat">
      <div>
        <div class="title">
          <span v-if="!bindWxCodeSuccess">扫码绑定微信</span>
          <span v-else>绑定微信成功</span>
        </div>
        <mu-circular-progress
          v-if="wxCodeLoading"
          class="demo-circular-progress wxcode-loading"
          :size="36"
        ></mu-circular-progress>
        <div v-else class="bind-wechat-img-main">
          <img class="bind-wechat-img-qrcode" :src="baseImgUrl + qrCode" />
          <img
            class="bind-wechat-img-success"
            src="https://image.xuexiwangzhe.com/Fkuyx124Cg21HXDZ6RHKxANXWjxe"
            v-if="bindWxCodeSuccess"
          />
        </div>
        <div v-if="!bindWxCodeSuccess">
          <div v-if="!bindWxCodeError" class="tip">
            使用微信扫码绑定您的小工具
          </div>
          <div v-else class="tip tip-error">{{ bindWxCodeError }}</div>
        </div>
        <div class="next" v-else>
          <mu-button class="next-btn" flat @click="bindWxCodeSuccessNext"
            >下一步</mu-button
          >
          <div class="next-tip">
            <span style="color:#3366FF;margin-right:3px;">{{
              loginTimeNumber
            }}</span
            >秒后自动跳转
          </div>
        </div>
        <mu-flex
          class="footer-gray"
          align-items="center"
          justify-content="center"
        >
          <span class="footer-gray-line" style="margin-right:15px;"></span>
          <span>小工具 · 高效的学习项目运营平台</span>
          <span class="footer-gray-line" style="margin-left:15px;"></span>
        </mu-flex>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      select: "pwdLogin",
      sessionKey: "",
      // select: "bindWxCode",
      pwdShow: false,
      wxCodeLoading: false,
      verifyInterval: null,
      verifyTime: "",
      baseImgUrl: "https://image.xuexiwangzhe.com/",
      bindWxCodeError: "",
      qrCode: "",
      sign: "",
      from: "",
      wxWebsock: null,
      loginTimeInterval: null,
      loginTimeNumber: "",
      pwdForm: {
        account: "",
        pwd: "",
      },
      codeForm: {
        phone: "",
        code: "",
      },
      forgetForm: {
        phone: "",
        code: "",
        pwd: "",
      },
      registerForm: {
        phone: "",
        code: "",
        pwd: "",
        read: false,
      },
      phoneError: "",
      accountRules: [
        { validate: (val) => !!val, message: "必须填写手机号/账号" },
      ],
      phoneRules: [{ validate: (val) => !!val, message: "必须填写手机号" }],
      codeRules: [{ validate: (val) => !!val, message: "必须填写验证码" }],
      pwdRules: [{ validate: (val) => !!val, message: "必须填写密码" }],
      heartCheck: {
        timeout: 60000, //60秒
        timeoutObj: null,
        serverTimeoutObj: null,
      },
      lockReconnect: false,
      bindWxCodeSuccess: false,
    };
  },
  watch: {
    select(newVal, oldVal) {
      this.phoneError = "";
      this.pwdShow = false;
      if (newVal === "wxLogin") {
        this.getWxCode("1");
      } else {
        if (this.wxWebsock) {
          this.reset();
          this.wxWebsock.onclose = () => {
            this.wxWebsock = null;
          };
          this.wxWebsock.close();
        }
        if (newVal === "bindWxCode") {
          this.bindWxCodeSuccess = false;
          this.bindWxCodeError = "";
          this.getWxCode("2");
        } else if (newVal === "pwdLogin") {
          this.$nextTick(() => {
            this.$refs.pwdLoginForm.clear();
          });
        } else if (newVal === "codeLogin") {
          this.$nextTick(() => {
            this.$refs.codeLoginForm.clear();
          });
        }
      }
    },
  },
  computed: {
    wxSocketUrl() {
      return `wss://minitool.xuexiwangzhe.com/miniapp/websocket/pcLogin/${this.sign}/${this.from}`;
    },
  },
  methods: {
    getWxCode(from) {
      this.wxCodeLoading = true;
      const params = {
        from,
      };
      this.$axios.get("/pcLogin/qrConnect", { params }).then((res) => {
        if (res.success) {
          this.qrCode = res.qrConnect;
          this.sign = res.sign;
          this.from = from;
          this.initWxWebSock();
        } else {
          this.$toast.error(res.msg);
        }
        this.wxCodeLoading = false;
      });
    },
    register() {
      this.$refs.registerSubmitForm.validate().then((result) => {
        if (!result) return;
        const params = {
          phone: this.registerForm.phone,
          verifyCode: this.registerForm.code,
          password: this.registerForm.pwd,
        };
        this.$axios.post("/register/checkVerifyCode", params).then((res) => {
          if (res.success) {
            this.select = "bindWxCode";
          } else {
            this.$toast.error(res.msg);
          }
        });
      });
    },
    initWxWebSock() {
      // this.wxWebsock = new WebSocket(this.wxSocketUrl);
      if (this.from == "1") {
        this.wxWebsockLogin();
        return;
      }
      if (this.from == "2") {
        this.wxWebsockBind();
        return;
      }
    },
    wxWebsockLogin() {
      this.getWebSocket(this.wxSocketUrl, (e) => {
        if (e.data) {
          const result = JSON.parse(e.data);
          if (result.success && result.sessionKey) {
            this.loginSet(result.sessionKey);
          }
        }
      });
    },
    wxWebsockBind() {
      this.getWebSocket(this.wxSocketUrl, (e) => {
        if (e.data) {
          const result = JSON.parse(e.data);
          if (result.success && result.sessionKey && result.toIndex == 1) {
            this.bindWxCodeSuccess = true;
            this.sessionKey = result.sessionKey;
            this.loginTimeNumber = 3;
            this.loginTimeInterval = setInterval(() => {
              if (this.loginTimeNumber === 1) {
                clearInterval(this.loginTimeInterval);
                this.loginSet(result.sessionKey);
              } else {
                this.loginTimeNumber -= 1;
              }
            }, 1000);
          } else if (result.success && result.sessionKey) {
            console.log(
              JSON.stringify({
                phone: this.registerForm.phone,
                verifyCode: this.registerForm.code,
                password: this.registerForm.pwd,
                userId: result.userId,
              })
            );
            this.wxWebsock.send(
              JSON.stringify({
                phone: this.registerForm.phone,
                verifyCode: this.registerForm.code,
                password: this.registerForm.pwd,
                userId: result.userId,
              })
            );
          } else if (!result.success) {
            this.$toast.error(result.msg);
            this.bindWxCodeError = result.msg;
          }
        }
      });
    },
    bindWxCodeSuccessNext() {
      if (this.loginTimeInterval) {
        clearInterval(this.loginTimeInterval);
      }
      this.loginSet(this.sessionKey);
    },
    getVerifyCode(phone) {
      if (!this.verifyInterval) {
        if (!phone) {
          this.phoneError = "请先输入手机号";
          this.$toast.error("请先输入手机号");
          return;
        }
        this.phoneError = "";
        const params = { phone };
        this.$axios.get("/verifyCode/verifyCode", { params }).then((res) => {
          this.getVerifyCodeResHandle(res.success, res.msg);
        });
      }
    },
    getVerifyCodeResHandle(result, msg) {
      if (result) {
        this.$toast.success("发送验证码成功");
        this.verifyTime = 60;
        this.verifyInterval = setInterval(() => {
          if (this.verifyTime === 0) {
            clearInterval(this.verifyInterval);
            this.verifyInterval = null;
          } else this.verifyTime -= 1;
        }, 1000);
      } else {
        this.$toast.error(msg);
      }
    },
    login(type) {
      this.phoneError = "";
      switch (type) {
        case "code":
          this.$refs.codeLoginForm.validate().then((result) => {
            if (!result) return;
            const params = {
              phone: this.codeForm.phone,
              verifyCode: this.codeForm.code,
              type: "phoneVerifyCode",
            };
            this.$axios.post("/pcLogin/pcLogin", params).then((res) => {
              if (res.success) {
                this.$toast.success("登录成功");
                this.loginSet(res.sessionKey);
              } else {
                this.$toast.error(res.msg);
              }
            });
          });
          break;
        case "pwd":
          this.$refs.pwdLoginForm.validate().then((result) => {
            if (!result) return;
            const params = {
              loginName: this.pwdForm.account,
              password: this.pwdForm.pwd,
              type: "accountPassword",
            };
            this.$axios.post("/pcLogin/pcLogin", params).then((res) => {
              if (res.success) {
                this.$toast.success("登录成功");
                this.loginSet(res.sessionKey);
              } else {
                this.$toast.error(res.msg);
              }
            });
          });
          break;
      }
    },
    loginSet(sessionKey) {
      sessionStorage.setItem("SESSIONKEY", sessionKey);
      this.$axios.interceptors.request.use(
        (config) => {
          var SESSIONKEY = sessionStorage.getItem("SESSIONKEY");
          if (SESSIONKEY) {
            config.headers.SESSIONKEY = SESSIONKEY;
          }
          return config;
        },
        (error) => {
          return Promise.reject(error);
        }
      );
      const dateNow = new Date().getTime();
      localStorage.setItem("loginTime", dateNow);
      location.href = "index.html";
    },
    forgetPwd() {
      this.$refs.forgetPwdForm.validate().then((result) => {
        if (!result) return;
        const params = {
          password: this.forgetForm.pwd,
          phone: this.forgetForm.phone,
          verifyCode: this.forgetForm.code,
        };
        this.$axios.post("/user/updatePassword", params).then((res) => {
          if (res.success) {
            this.$toast.success("修改成功");
            this.select = "pwdLogin";
          } else {
            this.$toast.error(res.msg);
          }
        });
      });
    },
    getWebSocket(url, message) {
      this.wxWebsock = new WebSocket(url);
      this.wxWebsock.onerror = (event) => {
        console.log("websocket服务出错了");
        this.reconnect(url, message);
      };
      this.wxWebsock.onclose = (event) => {
        console.log("websocket服务关闭了");
        this.reconnect(url, message);
      };
      this.wxWebsock.onopen = (event) => {
        console.log("websocket服务打开了");
        this.reset();
        this.start();
      };
      this.wxWebsock.onmessage = (event) => {
        //如果获取到消息，心跳检测重置
        //拿到任何消息都说明当前连接是正常的
        console.log("websocket服务获得数据了");
        //接受消息后的UI变化
        if (event.data) {
          const result = JSON.parse(event.data);
          if (result.heartCheck) {
            console.log("收到心跳，重置");
            this.reset();
            this.start();
          }
        }
        message(event);
      };
    },
    reconnect(url, message) {
      if (this.lockReconnect) return;
      this.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(() => {
        this.getWebSocket(url, message);
        this.lockReconnect = false;
      }, 2000);
    },
    reset() {
      clearTimeout(this.heartCheck.timeoutObj);
      clearTimeout(this.heartCheck.serverTimeoutObj);
    },
    start() {
      this.heartCheck.timeoutObj = setTimeout(() => {
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        //onmessage拿到返回的心跳就说明连接正常
        this.wxWebsock.send(JSON.stringify({ heartCheck: 1 }));
        this.heartCheck.serverTimeoutObj = setTimeout(() => {
          //如果超过一定时间还没重置，说明后端主动断开了
          this.wxWebsock.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        }, this.heartCheck.timeout);
      }, this.heartCheck.timeout);
    },
  },
  destroyed() {
    if (this.wxWebsock) {
      this.reset();
      this.wxWebsock.onclose = () => {
        this.wxWebsock = null;
      };
      this.wxWebsock.close();
    }
  },
};
</script>
<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
}
.page-login {
  background-color: #f7f7f7;
  position: relative;
  height: 100%;
  .header {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #1f1f1f;
    font-size: 16px;
    z-index: 10;
  }

  .header-img {
    background-color: transparent;
    margin-right: 10px;
  }

  .footer {
    width: 100%;
    color: #125cfb;
    margin-top: 25px;
  }

  .footer-line-img {
    width: 180px;
  }

  .wxcode-loading {
    display: block;
    margin: 30px auto;
  }

  .footer-gray {
    position: absolute;
    bottom: 50px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #8b8b8b;
  }

  .footer-gray-line {
    width: 35px;
    height: 2px;
    background-color: #878787;
  }

  .bind-wechat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 100%;

    .title {
      margin-bottom: 40px;
      text-align: center;
      > span {
        position: relative;
        padding-bottom: 13px;
        color: #383a40;
        font-size: 23px;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 30px;
          height: 4px;
          background-color: #3265ff;
        }
      }
    }

    &-img-main {
      position: relative;
      width: 200px;
      margin: 0 auto 10px auto;
    }

    &-img-success {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
    }

    &-img-qrcode {
      width: 100%;
    }

    .tip {
      color: #838383;
      font-size: 12px;
      text-align: center;
    }

    .tip-error {
      color: red;
    }

    .next {
      text-align: center;
    }

    .next-btn {
      color: #3366ff;
    }

    .next-tip {
      color: #bab7b7;
    }
  }

  .main {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 950px;
    transform: translate(-50%, -50%);
  }
  .left-container {
    position: relative;
    z-index: 11;
    height: 541px;
    width: 450px;
    margin-right: -8px;
    padding: 31px;
    box-sizing: border-box;
  }
  .right-container {
    position: relative;
    z-index: 10;
    height: 542px;
    width: 500px;
    background-color: #fff;
    box-shadow: 0px 4px 21px 0px rgba(29, 26, 61, 0.16);
    border-radius: 8px;
  }

  .code-title {
    color: #383a40;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }

  .qrcode-img {
    border: 1px solid #efeff0;
    padding: 3px;
    width: 200px;
    display: block;
    margin: 0 auto 10px auto;
  }

  .qrcode-sign {
    margin-bottom: 40px;
    color: #838383;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
  }

  .login-code {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .login-main {
    width: 400px;
    margin: 100px auto 0 auto;
  }

  .forget-main {
    width: 400px;
    margin: 40px auto 0 auto;
  }

  .register-main {
    width: 400px;
    margin: 40px auto 0 auto;
  }

  .forget-title {
    text-align: center;
    font-size: 18px;
    color: #383a40;
    margin-bottom: 10px;
  }

  .login-code-sign {
    cursor: pointer;
    width: 80px;
    margin-top: 5px;
  }

  .login-code-code {
    cursor: pointer;
    width: 50px;
  }

  .read-info {
    display: inline-block;
    span {
      cursor: pointer;
      color: #3f6fff;
    }
  }

  .login-tab-item {
    &:last-child {
      margin-right: 0;
    }
    cursor: pointer;
    color: #aaaaaa;
    font-size: 16px;
    margin-right: 60px;
  }

  .login-input-aj {
    margin-bottom: 10px;
  }

  .forget-input-aj {
    margin-bottom: 40px;
  }

  .login-input {
    .mu-input-line {
      background-color: #e8ebef;
    }
  }

  .login-input.has-label {
    .mu-input-label.float {
      color: #c8c6c8;
    }
  }

  .login-tab {
    // margin-bottom: 10px;
  }

  .pwd-input-img {
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 30px;
  }

  .login-forget-pwd {
    cursor: pointer;
    font-size: 12px;
    color: #686868;
  }

  .get-code-btn {
    position: absolute;
    right: -8px;
    bottom: 25px;
    width: 120px;
    height: 40px;
    color: #3265ff;
    border-radius: 30px;
    border: 1px solid #3265ff;
    box-shadow: none;
    background-color: transparent;
  }

  .get-code-btn-disabled {
    color: #aaaaaa !important;
    border-color: #aaa !important;
    background-color: transparent !important;
    width: 140px;
  }

  .login-btn {
    display: block;
    background-color: #3265ff;
    box-shadow: none;
    color: #fff;
    width: 350px;
    height: 50px;
    border-radius: 38px;
    margin: 0 auto 20px auto;
  }

  .go-register {
    text-align: center;
    font-size: 12px;
    color: #686868;
    span {
      cursor: pointer;
      color: #4f7aff;
    }
  }

  .login-tab-item-actived {
    color: #383a40;
    &::after {
      content: "";
      display: block;
      margin: 10px auto 0 auto;
      height: 3px;
      width: 40px;
      background-color: #3265ff;
    }
  }
}
</style>
